<!DOCTYPE html>

<html>
    <head>
        <meta>
        <title>动态组件</title>
    </head>
    <body>

        <div id="root">
            <div class="tabs">
                <input type="radio" v-model="componentName" value="account">账号
                <input type="radio" v-model="componentName" value="email">邮箱
            </div>
            <keep-alive>
                <component :is="componentName"></component>
            </keep-alive>
        </div>

        <script src="../scripts/vue@3.2.31.js"></script>

        <script>
             const Account = {
                template: `<div>
                              <label for="account">账号</label>
                              <input type="text" placeholder="请输入账号" id="account">
                              <button>登录</button>
                           </div>`,
                activated(){
                    console.log( '激活Account');
                },
                deactivated(){
                    console.log( 'Account失活');
                }
            }
            const Email = {
                template: `<div>
                              <label for="email">邮箱</label>
                              <input type="email" placeholder="请输入邮箱" id="email">
                              <button>登录</button>
                           </div>`,
                activated(){
                    console.log( '激活Email');
                },
                deactivated(){
                    console.log( 'Email失活');
                }
            }

            const options = {
                components: {
                    'account': Account ,
                    'email': Email 
                },
                data(){
                    return {
                        componentName: 'email'
                    }
                }
            }
            Vue.createApp(options).mount('#root');
        </script>
        
    </body>
</html>